.bookManage {
  $popHeight: 35rem;
  $toolBarHeight: 3rem;
  $contentHieght: 28rem;
  $footerHeight: $popHeight - $toolBarHeight -$contentHieght;

  

  :global {
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #00000055;
    }
    .bookManage {
      position: absolute;
      left: 50%;
      top: 50%;
      width:  28rem;
      height: $popHeight;
      transform: translate(-50%,-50%);
      background-color: #eee;
      .toolbar {
        display: flex;
        justify-content: space-between;
        height: $toolBarHeight;
        background-color: #fff;
        border-bottom: 1px solid #eee;
        .close {
  
        }
        .title {
          .active {
            color: blue;
          }
        }
        .rightBtns {
          & > span {
            margin-left: 1rem;
            padding: 5px 10px;
          }
  
          .searchBtn {
            width: 5rem;
  
            &:hover {
              background-color: #eee;
            }
          }
        }
      }
      .content {
        height: $contentHieght;
        padding: 0 1rem;
        ul {
          padding: 0;
          overflow-y: scroll;
          li {
            position: relative;
            list-style: none;
            width: 100%;
            height: 5rem;
            line-height: 5rem;
            background-color: red;
            border-radius: 10px;
            text-align: center;
            &:nth-child(n+2) {
              margin-top: 1rem;
            }
            span {
              position: absolute;
              line-height: 1.75;
            }
            .moreOptions {
              position: absolute;
              right: 1rem;
              top: 0.5rem;
              line-height: 1.75;
            }
            .check {
              right: 1rem;
              top: 2.5rem;
              width: 1rem;
              height: 1rem;
              background-color: #fff;
              border-radius: 1rem;
              text-align: center;
              line-height: 1rem;
            }
          }
          .check {
            display: none;
          }
          .active .check {
            display: block;
          }
          
        }
      }
      .footer {
        width: 100%;
        height: $footerHeight;
        background-color: pink;
      }
    }
    .createBook {
      left: 50%;
      top: 50%;
      width:  28rem;
      transform: translate(-50%,-50%);
      height: 19rem;
      padding: 0 1rem;
      background-color: #fff;
      ul {
        padding: 0;
        li {
          position: relative;
          list-style: none;
          width: 100%;
          height: 5rem;
          line-height: 5rem;
          background-color: red;
          border-radius: 10px;
          text-align: center;
          &:nth-child(n+2) {
            margin-top: 1rem;
          }
          span {
            position: absolute;
            line-height: 1.75;
          }
          .moreOptions {
            position: absolute;
            right: 1rem;
            top: 0.5rem;
            line-height: 1.75;
          }
          .check {
            right: 1rem;
            top: 2.5rem;
            width: 1rem;
            height: 1rem;
            background-color: #fff;
            border-radius: 1rem;
            text-align: center;
            line-height: 1rem;
          }
        }
        .check {
          display: none;
        }
        .active .check {
          display: block;
        }
        
      }
    }
  }
}